<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" session="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="f" uri="/WEB-INF/functions.tld" %>
<!doctype HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
        <title> 车友会-活动报名 </title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="lijun_gz none" />
        <link rel="stylesheet" type="text/css" href="http://js.3conline.com/wap/pcauto/2014/touch/cyh.css">
    </head>

    <body class="g-doc">
        <!--栏目计数器/文章计数器-->
        <jsp:include page="/template/wap/common/counter.jspf">
            <jsp:param name="channel" value="7388" />
        </jsp:include>
        <div class="body">
            <%@include file="../common/intf6007.html" %>
            <!-- 公共头部 -->
            <div class="g-hd">
                <a href="http://m.pcauto.com.cn" class="header-home" title="太平洋汽车网"></a>
                <div class="header-title">
                    <span class="header-title-nav">
                        <a href="${WAPROOT}/">车友会</a>&nbsp;&gt;&nbsp;<a href="${WAPROOT}/${myUrl}/"> ${fn:length(fn:escapeXml(club.name))>8?fn:substring(fn:escapeXml(club.name),0,8):fn:escapeXml(club.name)}${fn:length(fn:escapeXml(club.name))>8?"...":""}</a> > <a href="${WAPROOT}/${myUrl}/activity/">活动</a>
                    </span>
                </div>
            </div>

            <div class="m-hdtit">${fn:escapeXml(activity.title)}</div>
            <div class="m-hdxq">
                <span><em class="em1">时间：</em><fmt:formatDate value="${activity.beginDate}" type="both" pattern="yyyy-MM-dd"></fmt:formatDate> 至
                    <fmt:formatDate value="${activity.endDate}" type="both" pattern="yyyy-MM-dd"></fmt:formatDate></span>
                <span><em class="em2">截止：</em><fmt:formatDate value="${activity.signupDate}" type="both" pattern="yyyy-MM-dd"></fmt:formatDate></span>
                <span><em class="em3">地点：</em>${address}</span>
                <span><em class="em4">费用：</em>${activity.money}元/人</span>
                <div class="m-btnArea">
                        <c:if test="${userStatus==101}">
                            <c:if test="${user==null || user.uid==0}">
                                <a href="javascript:window.location.href = '${UCROOT}/my/passport/login.jsp?return=' + window.location.href" class="u-btnA">请点击登录再报名</a>
                            </c:if>
                            <c:if test="${user!=null && user.uid!=0}"><a href="javascript:showBmform();" class="u-btnA">报名参加</a></c:if>

                        </c:if>
                        <c:if test="${userStatus==102 || userStatus==103}">
                            <a class="u-btnA u-btnC">报名已结束</a>
                        </c:if>
                        <c:if test="${userStatus==201}">
                            <a class="u-btnA u-btnA">审核中</a>
                        </c:if>
                        <c:if test="${userStatus==104}">
                            <a class="u-btnA u-btnC">活动中</a>
                        </c:if>
                        <c:if test="${userStatus==105}">
                            <a class="u-btnA u-btnB">活动已结束</a>
                        </c:if>
                        
                     <c:if test="${userStatus==203}"> <!-- 已报名 -->
                        <a class="u-btnA u-btnB">已报名</a>
                    </c:if>

                </div>
            </div>
            <c:if test="${activityStatus==0 ||((activityStatus==1||activityStatus==-1)&&activity.joinNum>0) }">
                <div class="m-bmxq">
                    <div class="m-bmxq-th"><em></em>&nbsp&nbsp已报名 <b>${activity.joinNum}</b> 人</div>
                    <c:if test="${activity.joinNum>0 && !empty listMember}">
                        <div class="m-bmxq-tb" id="Jbmxq">
                            <c:forEach var="item" items="${listMember}">
                                <a href="${item.userWapUrl}"><em>${item.nikename}</em>(${item.joinNum})</a>
                            </c:forEach>
                        </div>
                    </c:if>
                    <c:if test="${activity.joinNum==0 && empty listMember}">
                        <div id="nodata" style="padding: 20px 10px;" class="m-none"><span>  >_< lll</span><p>还没车友报名参加该活动哦~</p></div>
                    </c:if>
                </div>
            </c:if>

            <div class="m-bmxq">
                <div class="m-bmxq-th"><em class="em1"></em>&nbsp&nbsp活动安排</div>
                <div class="m-bmxq-tb">
                    ${f:convertUbbLazy(activity.fullContent,1,1)}
                </div>
            </div>

            <!-- 填写报名信息 -->
            <div class="m-bmform" id="Jbmform">
                <div class="m-bmform-wrap">
                    <div class="m-bmform-wrap-th">活动报名</div>
                    <div class="m-bmform-wrap-tb">
                        <form id="mainForm" name="mainForm">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <th>真实姓名</th>
                                    <td>
                                        <span class="u-spaninput">
                                            <input type="text" id="cName" placeholder="请在此输入姓名...">
                                        </span>
                                        <!-- 提示 -->
                                        <p class="m-postMessage-warn" id="usernameTip" style="display: none;"></p> 
                                    </td>
                                </tr>

                                <tr>
                                    <th>联系电话</th>
                                    <td>
                                        <span class="u-spaninput">
                                            <input type="text" id="cphone" placeholder="请在此输入联系方式...">
                                        </span>
                                        <!-- 提示 -->
                                        <p class="m-postMessage-warn" id="moblieTip" style="display: none;"></p> 
                                    </td>
                                </tr>
                                <tr>
                                    <th>参加人数</th>
                                    <td>
                                        <span class="u-spaninput">
                                            <input type="number" id="cjoinNum" placeholder="请在此输入参与人数...">
                                        </span>
                                        <!-- 提示 -->
                                        <p class="m-postMessage-warn" id="joinNumTip" style="display: none;">请输入正确的人数</p> 
                                    </td>
                                </tr>
                                <tr>
                                    <th>车牌号码</th>
                                    <td>
                                        <span class="u-spaninput">
                                            <input type="text" id="clincensePlate" placeholder="请在此输入车牌号码...">
                                        </span>
                                        <!-- 提示 -->
                                        <p class="m-postMessage-warn" id="clincensePlateTip" style="display: none;">车牌长度不能超过20</p> 
                                    </td>
                                </tr>
                                <tr>
                                    <th>特别说明</th>
                                    <td>&nbsp</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="u-textarea">
                                        <textarea rows="" cols=""  placeholder="请在此输入特别说明..." id="cdescript"></textarea>
                                        <p class="m-postMessage-warn" id="cdescriptTip" style="display: none;">说明长度不能超过255</p> 
                                    </td>
                                </tr>
                            </table>
                        </form>
                        <div class="m-bmform-btn">
                            <a href="javascript:hideBmform();">关闭</a>
                            <a href="javascript:ajaxSubmit();">提交</a>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript" src="http://js.3conline.com/wap/2013/common/js/zepto.min.js"></script>
            <script type="text/javascript">
	            var baseUrl = "${WAPROOT}";
	            (function(){
	                var showBox = function(container){
	                    //添加属性
	                    if(!container){return};
	                    this.box = container;
	                    this.boxa = this.box.querySelectorAll("a");
	                    if(this.boxa.length < 6){
	                        for (var i = 0; i < this.boxa.length; i++) {
	                            this.boxa[i].style.display = "inline-block";
	                        };
	                        return;
	                    }else{
	                        this.addbox();
	                    };
	                    this.init();
	                };
	                showBox.prototype = {
	                    //添加方法
	                    init: function(){
	                        var _this = this;
	                        for (var i = 0; i < 5; i++) {
	                            _this.boxa[i].style.display = "inline-block";
	                        };
	                        var morea = _this.box.querySelector('.m-bmxq-more');
	                        if(!morea) {return};
	                        morea.addEventListener("click", function(){
	                            _this.show();
	                            morea.style.display = "none";
	                        })
	                    },
	                    show: function(){
	                        var _this = this;
	                        for (var i = 5; i < _this.boxa.length; i++) {
	                            _this.boxa[i].style.display = "inline-block";
	                        };
	                    },
	                    addbox: function(){
	                        var newbox = document.createElement('a'),
	                        _this = this;
	                        newbox.className = 'm-bmxq-more';
	                        newbox.innerHTML = '全部';
	                        _this.box.appendChild(newbox);
	                    }
	                };
	                var bmxqas = document.getElementById('Jbmxq');
	                var showbox = new showBox(bmxqas);
	            })()
	            /*报名填写*/
	            function showBmform(){
	                if(${user==null || user.uid==0}){
	                    location.href="${UCROOT}/my/login.jsp?return="+location.href;
	                    return;
	                }
	                if(${empty member}){
	                    showTips('抱歉，只有该车友会会员才能报名参加活动！');
	                    return;
	                }
	                var bmform = document.getElementById('Jbmform');
	                if(!bmform){return;}
	                var bmform_height = document.getElementsByTagName('body')[0].clientHeight;
	                bmform.style.height = bmform_height+20+'px';
	                bmform.style.display = 'block';
	            }
	            function hideBmform(){
	                var bmform = document.getElementById('Jbmform');
	                if(!bmform){return;}
	                bmform.style.display = 'none';
	            }
	            /*各种提示*/
	            function showTips(msg){
	                var tips = document.getElementById('Jtips');
	                if(!tips) {
	                    tips = document.createElement('div');
	                    tips.id = 'Jtips';
	                    tips.className = 'm-tips';
	                    document.body.appendChild(tips);
	                }
	                tips.innerHTML = msg;
	                tips.style.display = 'block';
	                tips.style.width = '70%';
	                var tips_width = tips.clientWidth/2;
	                tips.style.marginLeft = '-'+tips_width+'px';
	                tips.style.opacity = 1;    
	                setTimeout(function(){
	                    tips.style.webkitTransition = 'all 0.3s ease-in';
	                    tips.style.opacity = 0;
	                    tips.style.marginTop = '-80px';
	                    setTimeout(function(){
	                        tips.style.display = 'none';
	                        tips.style.marginTop = '-40px';
	                    }, 300);
	                }, 3000);
	            }
	            function ajaxSubmit(){
	                if(!checkInfo()){
	                    return;
	                }
	                var name = $("#cName").val();
	                var phone = $("#cphone").val();
	                var joinNum = $("#cjoinNum").val();
	                var lincensePlate = $("#clincensePlate").val();
	                var descript = $("#cdescript").val();
	                showTips("提交中...");
                        $.ajax({
                            url:baseUrl+"/activity/applyActivity.do?req_enc=utf-8&resp_enc=utf-8",
                            data:{
	                    activityId:${activity.activityId},
	                    name:name,
	                    phone:phone,
	                    joinNum:joinNum,
	                    lincensePlate:lincensePlate,
	                    remark:descript
	                },
                            dataType:"json",
                            type:"post",
                            success:function(data){
                            if(data.code==0){
                                location.reload();
                            }else{
                                showTips(data.message);
                            }
	                },
                           error:function(xmlHttpRequest, textStatus, errorThrown){
                            var message = "网络错误,请联系管理员";
                            if(xmlHttpRequest.status==503){
                                var json = eval("("+xmlHttpRequest.responseText+")");
                                message = (json.message == ""?"网络错误,请联系管理员":json.message);
                            }
                            showTips(message);
                        }
                        });
	            }
	            function checkInfo(){
	                var name = $("#cName").val();
	                var phone = $("#cphone").val();
	                var joinNum = $("#cjoinNum").val();
	                var lincensePlate = $("#clincensePlate").val();
	                var descript = $("#cdescript").val();
	                if(name=="" || name==null){
                            $("#usernameTip").html("请输入真实姓名");
	                    $("#usernameTip").show();
	                    return false;
	                }else if(name.length>20){
                            $("#usernameTip").html("姓名长度不能超过20");
	                    $("#usernameTip").show();
	                    return false;
	                }else{
	                    $("#usernameTip").hide();
	                }
	                if(phone=="" || phone==null || !phone.match("^\\d+$")){
                            $("#moblieTip").html("请输入正确的联系电话");
	                    $("#moblieTip").show();
	                    return false;
	                }else if(phone.length>20){
                            $("#moblieTip").html("电话长度不能超过20");
	                    $("#moblieTip").show();
	                    return false;
	                }else{
	                    $("#moblieTip").hide();
	                }
	                if(joinNum=="" || joinNum==null){
	                    $("#joinNumTip").show();
	                    return false;
	                }else{
	                    $("#joinNumTip").hide();
	                }
	                if(lincensePlate.length>20){
	                    $("#clincensePlateTip").show();
	                    return false;
	                }else{
	                    $("#clincensePlateTip").hide();
	                }
	                if(descript.length>255){
	                    $("#cdescriptTip").show();
	                    return false;
	                }else{
	                    $("#cdescriptTip").hide();
	                }
	                
	                if(${user==null || user.uid==0}){
	                    showTips('抱歉，请登录后再报名！');
	                    return false;
	                }
	                if(${empty member}){
	                    showTips('抱歉，只有该车友会会员才能报名参加活动！');
	                    return false;
	                }
	                return true;
	            }
                    function vpPhotos_(){
                        //定义空函数，避免JS报错
                    }
                    function aw_(obj){
                        //定义空函数，避免JS报错
                    }
            </script>

            <div id="Jfoot" class="g-footer">
                <!-- 公共底部 -->
                <%@include file="../common/intf5987.html" %>
            </div>
        </div>
    </body>
</html>